<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>BPMN在线作图工具</title>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="keywords" content="bpmn，activiti，工作流，作图工具，bpmn-js"/>
    <meta name="description" content="世界上最好的BPMN在线作图工具"/>
    <meta name="author" content="小柒2012" />
    <meta name="site" content="https://blog.52itstyle.vip" />
    <link th:href="@{/bpmn/css/bpmn_font.css}"  rel="stylesheet">
    <link th:href="@{/bpmn/css/bpmn.css}"  rel="stylesheet">
    <link th:href="@{/bpmn/css/diagram-js.css}"  rel="stylesheet">
  </head>
  <body class="shown animate">
	<!-- 主面板 -->
	 <div  class="content"  id="js-drop-zone">
	    		<div id="canvas"></div>
	 </div>
	 <!-- 左下角面板 -->
	 <div class="io-import-export">
	    	<!-- 导入和新增 -->
			<ul class="io-import io-control io-control-list io-horizontal">
				<li>
				    <input type="file"  onchange="showBPMN()"  id="btn_file" style="display:none">
					<button title="导入本地BPMN"  onclick="openLocal()">
						<span class="icon-open"></span>
					</button>
				</li>
				<li class="vr" style="margin-left: 2px"></li>
				<li>
					<button title="创建一个新的流程图" onclick="createNew()">
						<span class="icon-plus-circled"></span>
					</button>
				</li>
			</ul>
			<!-- 下载和保存 -->
			<ul class="io-import io-control io-control-list io-horizontal">
				<li><a  class="download"   id="download"  title="导出BPMN"  onclick="exportDiagram()"> <span class="icon-download"></span>
				</a></li>
				<li><a class="download"  title="导出SVG格式图片"  onclick="downloadSVG()"> <span class="icon-picture"></span>
				</a></li>
			</ul>
		</div>
		<!-- 右上角面板 -->
		<div class="io-editing-tools"  jswidget="editing-tools"
			style="display: block;">
			<!-- 帮助和放大 -->
			<ul class="io-control-list io-horizontal">
				<li class="io-control" id="keybindings" >
					<button title="Toggle keyboard shortcuts overlay"
						jsaction="click:bio.showKeyboard">
						<span class="icon-keyboard"> </span>
					</button>
				</li>
				<li class="io-control" id="fullscreen">
					<button title="Toggle Fullscreen"
						jsaction="click:bio.toggleFullscreen">
						<span class="icon-resize-full"> </span>
					</button>
				</li>
			</ul>
		</div>
		<!-- 放大缩小 -->
		<div class="io-zoom-controls">
		    <ul class="io-zoom-reset io-control io-control-list">
		      <li>
		        <button title="reset zoom" jsaction="click:bio.zoomReset">
		          <span class="icon-size-reset"></span>
		        </button>
		      </li>
		    </ul>
		    <ul class="io-zoom io-control io-control-list">
		      <li>
		        <button title="zoom in" jsaction="click:bio.zoomIn">
		          <span class="icon-plus"></span>
		        </button>
		      </li>
		      <li>
		        <hr>
		      </li>
		      <li>
		        <button href="" title="zoom out" jsaction="click:bio.zoomOut">
		          <span class="icon-minus"></span>
		        </button>
		      </li>
		    </ul>
		  </div>
		<div class="io-dialog keybindings-dialog open"  id="help"  style="display: none">
		    <div class="content bindings-default">
		      <h1>Keyboard Shortcuts</h1>
		      <table>
		        <tbody>
		          <tr>
		            <td>Undo</td>
		            <td class="binding"><code>ctrl + Z</code></td>
		          </tr>
		          <tr>
		            <td>Redo</td>
		            <td class="binding"><code>ctrl + ⇧ + Z</code></td>
		          </tr>
		          <tr>
		            <td>Select All</td>
		            <td class="binding"><code>ctrl + A</code></td>
		          </tr>
		          <tr>
		            <td>Scrolling (Vertical)</td>
		            <td class="binding"><code>ctrl + Scrolling</code></td>
		          </tr>
		          <tr>
		            <td>Scrolling (Horizontal)</td>
		            <td class="binding"><code>ctrl + ⇧ + Scrolling</code></td>
		          </tr>
		          <tr>
		            <td>Direct Editing</td>
		            <td class="binding"><code>E</code></td>
		          </tr>
		          <tr>
		            <td>Hand Tool</td>
		            <td class="binding"><code>H</code></td>
		          </tr>
		          <tr>
		            <td>Lasso Tool</td>
		            <td class="binding"><code>L</code></td>
		          </tr>
		          <tr>
		            <td>Space Tool</td>
		            <td class="binding"><code>S</code></td>
		          </tr>
		        </tbody>
		      </table>
		    </div>
		  </div>
    <!-- <button id="save-button">print to console</button> -->
    <script th:src="@{/libs/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/common.js}"></script>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/bpmn/js/bpmn-modeler.development.js}"></script>
    <script th:src="@{/bpmn/js/bpmn_show.js}"></script>
    <script th:src="@{/localstorage/jquery.utils.js}"></script>
    <script th:src="@{/localstorage/localstorage.js}"></script>
    <!-- Required to convert named colors to RGB -->
	<script th:src="@{/canvg/rgbcolor.min.js}"></script>
	<!-- Optional if you want blur -->
	<script th:src="@{/canvg/stackblur.min.js}"></script>
	<!-- Main canvg code -->
	<script th:src="@{/canvg/canvg.min.js}"></script>
	<!-- endbuild -->
    <script type="text/javascript">
     	var bpmnId = ""; 
	    $(function() {
	    	var bpmnXml = bpmn.LocalStorage.get({
   			 	key : "bpmn"+bpmnId
   		    });
	    	openDiagram(bpmnXml);
	    	timer = window.setInterval(function(){
	        	  bpmnModeler.saveXML({ format: true }, function(err, xml) {
	    	          if (err) {
	    	          	  return console.error('could not save BPMN 2.0 diagram', err);
	    	          }
	    	          //保存单个对象
	   	    		 bpmn.LocalStorage.set({
	   	    		 		key : "bpmn"+bpmnId,
	   	    		  		value : xml,
	   	    		});
	   	    		var bpmnXml = bpmn.LocalStorage.get({
	   	    			 	key : "bpmn"+bpmnId
	   	    		});
	    	     });
	         }, 1000);
	    }); 
    </script>
  </body>
</html>